// sass-lint:disable no-vendor-prefixes
$config-sffv: (
  input-width: 100%,
  input-height: 25px,
  border-width: 1px,
  border-radius: 3px,
  input-border-color: #CCCCCC,
  input-focus-border-color: #337AB7,
  input-background: #FFFFFF,
  input-focus-background: #FFFFFF,
  font-size: 14px,
  placeholder-color: #BBBBBB,
  icon-size: 14px,
  icon-position: left,
  icon-color: #337AB7,
  icon-background: #FFFFFF,
  icon-background-opacity: 0,
  icon-clear-size: 14px
);


@function even-px($value) {
  @if type-of($value) == 'number' {
    @if (unitless($value)) {
      $value: $value * 1px;
    } @else if unit($value) == 'em' {
      $value: ($value / 1em * 16px);
    } @else if unit($value) == 'pts' {
      $value: $value * 1.3333 * 1px;
    } @else if unit($value) == '%' {
      $value: $value * 16 / 100% * 1px;
    };
    $value: round($value);
    @if ($value % 2 != 0) {
      $value: $value + 1;
    }
    @return $value;
  }
}

@mixin searchbox(
  $font-size: 90%,
  $input-width: 350px,
  $input-height: $font-size * 2.4,
  $border-width: 1px,
  $border-radius: $input-height / 2,
  $input-border-color: #CCC,
  $input-focus-border-color: #1EC9EA,
  $input-background: #F8F8F8,
  $input-focus-background: #FFF,
  $placeholder-color: #AAA,
  $icon: 'sbx-icon-search-1',
  $icon-size: $input-height / 1.6,
  $icon-position: left,
  $icon-color: #888,
  $icon-background: $input-focus-border-color,
  $icon-background-opacity: .1,
  $icon-clear: 'sbx-icon-clear-1',
  $icon-clear-size: $font-size / 1.1
) {
  display: inline-block;
  position: relative;
  width: $input-width;
  height: even-px($input-height);
  white-space: nowrap;
  box-sizing: border-box;
  font-size: $font-size;

  &__wrapper {
    width: 100%;
    height: 100%;
  }

  &__input {
    display: inline-block;
    transition: box-shadow .4s ease, background .4s ease;
    border: 0;
    border-radius: even-px($border-radius);
    box-shadow: inset 0 0 0 $border-width $input-border-color;
    background: $input-background;
    padding: 0;
    padding-right: if($icon-position == 'right', even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * .8)) + if($icon-background-opacity == 0, 0, even-px($font-size));
    padding-left: if($icon-position == 'right', even-px($font-size / 2) + even-px($border-radius / 2), even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)));
    width: 100%;
    height: 100%;
    vertical-align: middle;
    white-space: normal;
    font-size: inherit;
    appearance: none;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }

    &:hover {
      box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
    }

    &:focus,
    &:active {
      outline: 0;
      box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
      background: $input-focus-background;
    }

    &::placeholder {
      color: $placeholder-color;
    }

  }

  &__submit {
    position: absolute;
    top: 0;
    @if $icon-position == 'right' {
      right: 0;
      left: inherit;
    } @else {
      right: inherit;
      left: 0;
    }
    margin: 0;
    border: 0;
    border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
    background-color: rgba($icon-background, $icon-background-opacity);
    padding: 0;
    width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2));
    height: 100%;
    vertical-align: middle;
    text-align: center;
    font-size: inherit;
    user-select: none;

    // Helper for vertical alignement of the icon
    &::before {
      display: inline-block;
      margin-right: -4px;
      height: 100%;
      vertical-align: middle;
      content: '';
    }

    &:hover,
    &:active {
      cursor: pointer;
    }

    &:focus {
      outline: 0;
    }

    svg {
      width: even-px($icon-size);
      height: even-px($icon-size);
      vertical-align: middle;
      fill: $icon-color;
    }
  }

  &__reset {
    display: none;
    position: absolute;
    top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
    right: if($icon-position == 'right',
      even-px($input-height) + if($icon-background-opacity == 0, 0 , even-px($font-size)),
      (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px);
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    user-select: none;
    fill: rgba(#000, .5);

    &:focus {
      outline: 0;
    }

    svg {
      display: block;
      margin: 4px;
      width: even-px($icon-clear-size);
      height: even-px($icon-clear-size);
    }
  }

  &__input:valid ~ &__reset { // sass-lint:disable-line force-pseudo-nesting
    display: block;
    animation-name: sbx-reset-in;
    animation-duration: .15s;
  }

  @at-root {
    @keyframes sbx-reset-in {
      0% {
        transform: translate3d(-20%, 0, 0);
        opacity: 0;
      }

      100% {
        transform: none;
        opacity: 1;
      }
    }
  }
}

.sbx-sffv {
  @include searchbox($config-sffv...);
}

.ais-refinement-list--item em {
  font-style: normal;
  font-weight: bold;
}
